<template>
  <div id="onlyMonitor" class="onlyMonitor">
    <CardContainer headerName="长江大桥简介">
      <template slot="card-content">
        <div class="bridge-init">{{desc}}</div>
      </template>
    </CardContainer>
    <!-- 桥梁卡片  桥立面图 -->
    <div class="bridge-card-pic">
      <!-- 卡片 -->
      <div class="b-card">
        <CardContainer headerName="桥梁卡片">
          <template slot="card-content">
            <!-- el-tab 一般资料 上部结构 下部结构 附属工程 附挂管线 -->
            <BridgeCard :data="data"></BridgeCard>
          </template>
        </CardContainer>
      </div>
      <div class="b-pic">
        <div>
          <CardContainer headerName="桥立面图">
            <template slot="card-content">
              <img class="bridge-img" :src="facadeImage" alt />
            </template>
          </CardContainer>
        </div>
        <div>
          <CardContainer headerName="桥侧面图">
            <template slot="card-content">
              <img class="bridge-img" :src="realisticImage" alt />
            </template>
          </CardContainer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// card 容器组件
import CardContainer from "../healthMonitor/components/CardContainer";
// 桥梁卡片
import BridgeCard from "../healthMonitor/onlyMonitor/BridgeCard";
// 滚动条
import VuePerfectScrollbar from "vue-perfect-scrollbar";
import base from "../../api/base"
export default {
  data() {
    return {
      download: base.DOWNLOADURL,
      settings: {
        // perfectscrollbar settings
        maxScrollbarLength: 30,
        wheelSpeed: 1,
        swipeEasing: true
      },
      desc: "",
      ownId: "",
      facadeFolderId: '',
      realisticPictureFolderId: '',
      data: {},
      imageUrl: require("../../assets/healthMonitorAssets/img/bridge.png"),
      facadeImage: '',
      realisticImage: ''
    };
  },
  components: {
    CardContainer,
    BridgeCard,
    VuePerfectScrollbar
  },
  created() {
      // this.desc = this.$route.query.desc;
      //     this.ownId = this.$route.query.id;
      //     this.realisticPictureFolderId = this.$route.query.realisticPictureFolderId
      //     this.facadeFolderId = this.$route.query.facadeFolderId
      //     this.queryBridgeCardByBridgeId();
      //     this.queryImage()
      //     this.queryRealisticPictureImage()
  },
  watch: {
    "$route": {
      handler(val, old) {
        // console.log(val)
        if (val.path === '/bridgeInformation/bridgeDetail' && val.query.id) {
          this.desc = val.query.desc;
          this.ownId = val.query.id;
          this.realisticPictureFolderId = val.query.realisticPictureFolderId
          this.facadeFolderId = val.query.facadeFolderId
          this.queryBridgeCardByBridgeId();
          this.queryImage()
          this.queryRealisticPictureImage()
        }
      },
      immediate: true
    }
  },
  methods: {
    queryBridgeCardByBridgeId() {
      this.$api.bridge
        .queryBridgeCardByBridgeId({ ownId: this.ownId })
        .then(res => {
          if (res.data.success) {
            let data = res.data.data[0];
            if (data.length > 0) {
              this.data = data[0];
              this.data.bridgeCardPier =
                data[0].bridgeCardSubStructure.bridgeCardPier;
              this.data.bridgeCardAbutment =
                data[0].bridgeCardSubStructure.bridgeCardAbutment;
            } else {
              this.data = {
                bridgeCardBasicInfo: {},
                bridgeCardSuperStructure: {},
                bridgeCardPier: {},
                bridgeCardAbutment: {},
                bridgeCardAffiliateProject: {},
                bridgeCardAffiliatePipeline: {}
              };
            }
            // console.log(this.data);
          }
        });
    },
    queryImage(){
      if(this.facadeFolderId !== '') {
        this.$api.file.queryFolderId({folderId: this.facadeFolderId}).then(res => {
          if(res.data.success) {
            if(res.data.data.length > 0){
              this.facadeImage = this.download + res.data.data[0].filePath
            } else {
              this.facadeImage = this.imageUrl
            }
          }
        })
      }
    },
    queryRealisticPictureImage() {
      if(this.realisticPictureFolderId !== '') {
        this.$api.file.queryFolderId({folderId: this.realisticPictureFolderId}).then(res => {
          if(res.data.success) {
            if(res.data.data.length > 0){
              this.realisticImage = this.download + res.data.data[0].filePath
            } else {
              this.realisticImage = this.imageUrl
            }
          }
        })
      }
    }
  }
};
</script>

<style lang="scss">
.onlyMonitor {
  margin-bottom: 20px;
}
.bridge-init {
  line-height: 30px;
  font-size: 14px;
  margin-top: 15px;
  text-indent: 2em;
}
// 桥梁卡片 截面图
.bridge-card-pic {
  margin-top: 20px;
  width: 100%;
  height: 744px;
}
.bridge-card-pic {
  display: flex;
  justify-content: space-between;
  .b-card {
    width: calc(100% - 397px);
    height: 100%;
    background: #fff;
  }
  .b-pic {
    width: 382px;
    height: calc(100% + 15px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & > div {
      height: calc(50% - 7.5px);
      background: #fff;
    }
  }
  .bridge-img {
    width: 98%;
    height: 100%;
    margin-top: 20px;
  }
}
</style>
